import { EditMode } from './EditMode'
class EditModeCluster extends EditMode {
  initCssStyles () {
    this.setCssStyle('article-editing-area', 'user-select', 'none')
    this.setCssStyle('s', 'cursor', 'pointer')
    this.setCssStyle('cluster', 'cursor', 'pointer')
    this.addCssStyle(
      '.s.selected',
      '{background-color: rgba(14, 68, 247, 0.1);}'
    )
    this.addCssStyle(
      '.cluster.selected',
      '{background-color: rgba(0, 0, 0, 0.3);color: rgb(124, 124, 124);}'
    )
  }

  listenersDispenser (from, to) {
    from = from || this.rootElement.firstChild
    to = to || this.rootElement.lastChild
    window.onmousedown = this.listenersRegister('abandonSelected')
    EditMode.traverseSiblingElements(from, to, paragraph => {
      let sentence = paragraph.firstChild
      let idx = 0
      while (sentence) {
        sentence.ariaPosInSet = idx++
        switch (sentence.classList[0]) {
          case 's':
            sentence.onmouseleave = this.listenersRegister(
              'sentenceOnMouseLeave'
            )
            sentence.onmouseenter = this.listenersRegister(
              'sentenceOnMouseEnter'
            )
            sentence.onmousedown = this.listenersRegister('sentenceOnMouseDown')
            break
          case 'cluster':
            sentence.onmouseleave = this.listenersRegister(
              'clusterOnMouseLeave'
            )
            sentence.onmouseenter = this.listenersRegister(
              'clusterOnMouseEnter'
            )
            sentence.onmousedown = this.listenersRegister('clusterOnMouseDown')
            break
        }
        sentence = sentence.nextElementSibling
      }
      return true
    })
  }

  // 放弃选中的句子
  abandonSelected (e) {
    if (!this.editing) {
      return
    }
    if (!e || e.button === 2) {
      // 右键,取消选择操作
      this.editing = false
      // 复原选中的句子的样式
      let startEl = this.startEl
      let endEl = this.endEl
      endEl = endEl || startEl
      EditMode.traverseSiblingElements(startEl, endEl, el => {
        el.classList.remove('selected')
        return true
      })
      if (!this.mouseLeaveEndEl) {
        // 如果放弃选择,如果鼠标依然悬停在endEl,颜色不变,提高使用体验
        // 不使用刷新父元素的方法,减少性能消耗
        endEl.classList.add('selected')
      }
      this.startEl = null
      this.endEl = null
    }
  }

  sentenceOnMouseLeave (e) {
    if (this.editing) {
      // 编辑中
      this.mouseLeaveEndEl = true
      return
    }
    let s = e.currentTarget
    s.classList.remove('selected')
  }

  sentenceOnMouseEnter (e) {
    let s = e.currentTarget
    if (!this.editing) {
      s.classList.add('selected')
      return
    }
    let startEl = this.startEl
    let endEl = this.endEl
    // 还原前一次选中的句子颜色
    EditMode.traverseSiblingElements(startEl, endEl, el => {
      if (el !== startEl) {
        el.classList.remove('selected')
      }
      return true
    })
    // 如果不在同一个段落,返回
    if (!this.startP.contains(s)) {
      return
    }
    // 修改起点到终点的句子的颜色
    let res = EditMode.traverseSiblingElements(startEl, s, el => {
      // 如果中间存在聚簇
      if (el.classList.contains('cluster')) {
        // 回滚选中区域的样式
        EditMode.traverseSiblingElements(startEl, s, innerEl => {
          if (innerEl !== startEl) {
            innerEl.classList.remove('selected')
          }
          return true
        })
        return false
      }
      el.classList.add('selected')
      return true
    })
    // 更新endEl
    if (res) {
      this.endEl = s
      this.mouseLeaveEndEl = false
    }
  }

  sentenceOnMouseDown (e) {
    if (e.button !== 0) {
      return
    }
    let s = e.currentTarget
    // 左键
    // 确定选中区起点
    if (!this.editing) {
      this.editing = true
      this.startEl = s
      this.startP = this.vueComponent.getParagraphConteiner(s)
      return
    }
    // 确定选中区终点
    // 选中区存在聚簇或跨行的情况,不做处理
    if (this.endEl && this.endEl !== s) {
      return
    }
    // 整合选中的句子组成聚簇节点
    let newInnerHtml = ''
    let startEl = this.startEl
    let startP = this.startP
    EditMode.traverseSiblingElements(startEl, s, el => {
      newInnerHtml += el.innerHTML
      if (el !== startEl) {
        startP.removeChild(el)
      }
      return true
    })
    startEl.className = 'cluster'
    startEl.innerHTML = newInnerHtml
    this.editing = false
    this.startEl = null
    this.endEl = null
    // 重新初始化
    this.listenersDispenser(startP, startP)
  }

  clusterOnMouseLeave (e) {
    let s = e.currentTarget
    s.classList.remove('selected')
  }

  clusterOnMouseEnter (e) {
    let s = e.currentTarget
    if (!this.editing) {
      s.classList.add('selected')
      return
    }
    // 处于编辑状态,聚焦到聚簇时,清除选中的区域
    let startEl = this.startEl
    let endEl = this.endEl
    EditMode.traverseSiblingElements(startEl, endEl, el => {
      if (el !== startEl) {
        el.classList.remove('selected')
      }
      return true
    })
  }

  clusterOnMouseDown (e) {
    let s = e.currentTarget
    if (e.button !== 2) {
      return
    }
    if (this.editing) {
      s.classList.add('selected')
      return
    }
    // 将聚簇重新拆分为句子
    s.className = 's'
    let p = this.vueComponent.getParagraphConteiner(s)
    this.vueComponent.fixEntryElement(p)
    this.vueComponent.fixSencenteElment(p)
    // 重新初始化
    this.listenersDispenser(p, p)
  }

  onDestroy () {
    this.abandonSelected()
    super.onDestroy()
  }
}

export default EditModeCluster
